<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="shortcut icon" href="assets/img/20x20.png" type="image/png">

        <!--=============== REMIXICONS ===============-->
        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
        
        <!--=============== SWIPER CSS ===============-->
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Todo App 记录美好生活</title>
    </head>
    <body>
        <header class="header" id="header">
            <nav class="nav container">
                <a href="https://gitee.com/backpackerxl/react-todo-app/" class="nav__logo">
                    <img src="assets/img/20x20.png" alt="">
                    Todo App
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#home" class="nav__link active-link">首页</a>
                        </li>
                        <li class="nav__item">
                            <a href="#about" class="nav__link">关于</a>
                        </li>
                        <li class="nav__item">
                            <a href="#place" class="nav__link">产品</a>
                        </li>
                    </ul>

                    <div class="nav__dark">
                        <!-- Theme change button -->
                        <span class="change-theme-name">Dark mode</span>
                        <i class="ri-moon-line change-theme" id="theme-button"></i>
                    </div>

                    <i class="ri-close-line nav__close" id="nav-close"></i>
                </div>

                <div class="nav__toggle" id="nav-toggle">
                    <i class="ri-function-line"></i>
                </div>
            </nav>
        </header>

        <main class="main">
            <!--==================== HOME ====================-->
            <section class="home" id="home">
                <img src="assets/img/first.jpg" alt="" class="home__img">

                <div class="home__container container grid">
                    <div class="home__data">
                        <h1 class="home__data-title">这是一款用react Hooks <br> 写的 <b>单页面 <br> H5+应用</b></h1>
                        <button onclick="dowloadApp(3)" class="button">
                            <svg t="1630164821590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" width="16" height="16"><path d="M878.560643 337.248797a57.821717 57.821717 0 0 0-81.743709 0L574.604671 559.46106V172.966627a57.807267 57.807267 0 0 0-115.600085 0v386.494433L236.792323 337.248797a57.821717 57.821717 0 0 0-81.743709 0 57.814492 57.814492 0 0 0 0 81.750935l318.666083 318.666083a57.626642 57.626642 0 0 0 40.871855 16.928188c0.744176 0 1.473901-0.07225 2.218077-0.10115 0.744176 0.0289 1.473901 0.10115 2.218076 0.10115a57.612192 57.612192 0 0 0 40.871855-16.928188L878.560643 418.999732a57.814492 57.814492 0 0 0 0-81.750935zM860.982206 908.37824H165.402046a57.807267 57.807267 0 0 1 0-115.600084h695.572935a57.800042 57.800042 0 0 1 0.007225 115.600084z" fill="#ffffff" p-id="2742"></path></svg>
                            下载最新
                        </button>
                    </div>
                    <div class="home__info">
                        <div>
                            <span class="home__info-title">上Gitee查看源代码</span>
                            <a href="https://gitee.com/backpackerxl/react-todo-app/" class="button button--flex button--link home__info-button">
                                更多 <i class="ri-arrow-right-line"></i>
                            </a>
                        </div>

                        <div class="home__info-overlay">
                            <img src="assets/img/first-info.png" alt="" class="home__info-img">
                        </div>
                    </div>
                </div>
            </section>

            <!--==================== ABOUT ====================-->
            <section class="about section" id="about">
                <div class="about__container container grid">
                    <div class="about__data">
                        <h2 class="section__title about__title">动态 <br> Todo App 应用迎来2.0版本</h2>
                        <p class="about__description">
                            这次新增搜索功能以及批量删除指定日期代办事件，以及优化数据处理函数
                        </p>
                        <button onclick="dowloadApp(3)" class="button">
                            <svg t="1630164821590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" width="16" height="16"><path d="M878.560643 337.248797a57.821717 57.821717 0 0 0-81.743709 0L574.604671 559.46106V172.966627a57.807267 57.807267 0 0 0-115.600085 0v386.494433L236.792323 337.248797a57.821717 57.821717 0 0 0-81.743709 0 57.814492 57.814492 0 0 0 0 81.750935l318.666083 318.666083a57.626642 57.626642 0 0 0 40.871855 16.928188c0.744176 0 1.473901-0.07225 2.218077-0.10115 0.744176 0.0289 1.473901 0.10115 2.218076 0.10115a57.612192 57.612192 0 0 0 40.871855-16.928188L878.560643 418.999732a57.814492 57.814492 0 0 0 0-81.750935zM860.982206 908.37824H165.402046a57.807267 57.807267 0 0 1 0-115.600084h695.572935a57.800042 57.800042 0 0 1 0.007225 115.600084z" fill="#ffffff" p-id="2742"></path></svg>
                            下载最新
                        </button>
                    </div>

                    <div class="about__img">
                        <div class="about__img-overlay">
                            <img src="assets/img/app3_about1.jpg" alt="" class="about__img-one">
                        </div>

                        <div class="about__img-overlay">
                            <img src="assets/img/app3_about2.jpg" alt="" class="about__img-two">
                        </div>
                    </div>
                </div>
            </section>

            <!--==================== VIDEO ====================-->
            <section class="video section">
                <h2 class="section__title">视频</h2>

                <div class="video__container container">
                    <p class="video__description">
                        产品视频演示
                    </p>
                   <div class="video__content">
                    <iframe width="720" height="405" frameborder="0" src="https://www.ixigua.com/iframe/7001116152445272583?autoplay=0" referrerpolicy="unsafe-url" allowfullscreen></iframe>
                    </div>
                </div>
            </section>

            <!--==================== PLACES ====================-->
            <section class="place section" id="place">
                <h2 class="section__title">选择版本</h2>

                <div class="place__container container grid">
                    <!--==================== PLACES CARD 1 ====================-->
                    <div class="place__card">
                        <img src="assets/img/app01.jpg" alt="" class="place__img">
                        
                        <div class="place__content">
                            <span class="place__rating">
                            </span>

                            <div class="place__data">
                                <h3 class="place__title">Todo App</h3>
                                <span class="place__subtitle">1.0</span>
                            </div>
                        </div>
                            <button onclick="dowloadApp(1)" class="button button--flex place__button">
                                <svg t="1630164821590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" width="16" height="16"><path d="M878.560643 337.248797a57.821717 57.821717 0 0 0-81.743709 0L574.604671 559.46106V172.966627a57.807267 57.807267 0 0 0-115.600085 0v386.494433L236.792323 337.248797a57.821717 57.821717 0 0 0-81.743709 0 57.814492 57.814492 0 0 0 0 81.750935l318.666083 318.666083a57.626642 57.626642 0 0 0 40.871855 16.928188c0.744176 0 1.473901-0.07225 2.218077-0.10115 0.744176 0.0289 1.473901 0.10115 2.218076 0.10115a57.612192 57.612192 0 0 0 40.871855-16.928188L878.560643 418.999732a57.814492 57.814492 0 0 0 0-81.750935zM860.982206 908.37824H165.402046a57.807267 57.807267 0 0 1 0-115.600084h695.572935a57.800042 57.800042 0 0 1 0.007225 115.600084z" fill="#ffffff" p-id="2742"></path></svg>
                            </button>
                    </div>

                    <!--==================== PLACES CARD 2 ====================-->
                    <div class="place__card">
                        <img src="assets/img/app03.jpg" alt="" class="place__img">
                        
                        <div class="place__content">
                            <span class="place__rating">
                            </span>

                            <div class="place__data">
                                <h3 class="place__title">Todo App</h3>
                                <span class="place__subtitle">1.2</span>
                            </div>
                        </div>
                            <button onclick="dowloadApp(2)" class="button button--flex place__button">
                                <svg t="1630164821590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" width="16" height="16"><path d="M878.560643 337.248797a57.821717 57.821717 0 0 0-81.743709 0L574.604671 559.46106V172.966627a57.807267 57.807267 0 0 0-115.600085 0v386.494433L236.792323 337.248797a57.821717 57.821717 0 0 0-81.743709 0 57.814492 57.814492 0 0 0 0 81.750935l318.666083 318.666083a57.626642 57.626642 0 0 0 40.871855 16.928188c0.744176 0 1.473901-0.07225 2.218077-0.10115 0.744176 0.0289 1.473901 0.10115 2.218076 0.10115a57.612192 57.612192 0 0 0 40.871855-16.928188L878.560643 418.999732a57.814492 57.814492 0 0 0 0-81.750935zM860.982206 908.37824H165.402046a57.807267 57.807267 0 0 1 0-115.600084h695.572935a57.800042 57.800042 0 0 1 0.007225 115.600084z" fill="#ffffff" p-id="2742"></path></svg>
                            </button>
                    </div>

                    <!--==================== PLACES CARD 3 ====================-->
                    <div class="place__card">
                        <img src="assets/img/app02.jpg" alt="" class="place__img">
                        
                        <div class="place__content">
                            <span class="place__rating">
                            </span>

                            <div class="place__data">
                                <h3 class="place__title">Todo App</h3>
                                <span class="place__subtitle">2.0</span>
                            </div>
                        </div>
                            <button onclick="dowloadApp(3)" class="button button--flex place__button">
                                <svg t="1630164821590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" width="16" height="16"><path d="M878.560643 337.248797a57.821717 57.821717 0 0 0-81.743709 0L574.604671 559.46106V172.966627a57.807267 57.807267 0 0 0-115.600085 0v386.494433L236.792323 337.248797a57.821717 57.821717 0 0 0-81.743709 0 57.814492 57.814492 0 0 0 0 81.750935l318.666083 318.666083a57.626642 57.626642 0 0 0 40.871855 16.928188c0.744176 0 1.473901-0.07225 2.218077-0.10115 0.744176 0.0289 1.473901 0.10115 2.218076 0.10115a57.612192 57.612192 0 0 0 40.871855-16.928188L878.560643 418.999732a57.814492 57.814492 0 0 0 0-81.750935zM860.982206 908.37824H165.402046a57.807267 57.807267 0 0 1 0-115.600084h695.572935a57.800042 57.800042 0 0 1 0.007225 115.600084z" fill="#ffffff" p-id="2742"></path></svg>
                            </button>
                    </div>
                </div>
            </section>
        </main>

        <!--==================== FOOTER ====================-->
        <footer class="footer section">
            <div class="footer__container container grid">
                <div class="footer__content grid">
                    <div class="footer__data">
                        <h3 class="footer__title">个人介绍</h3>
                        <p class="footer__description">一位 <br> 热爱技术的
                            自由开发者
                        </p>
                    </div>
    
                    <div class="footer__data">
                        <h3 class="footer__subtitle">关于</h3>
                        <ul>
                            <li class="footer__item">
                                <a href="https://gitee.com/backpackerxl" class="footer__link">关于我</a>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="footer__rights">
                    <p class="footer__copy">&#169; 2021 Backpackerxl. All rigths reserved.</p>
                    <div class="footer__terms">
                        <a href="https://github.com/Backpackerxl" class="footer__terms-link">Github & Backpackerxl</a>
                        <a href="https://gitee.com/backpackerxl" class="footer__terms-link">Gitee & Backpackerxl</a>
                    </div>
                </div>
            </div>
        </footer>

         <!--========== SCROLL UP ==========-->
        <a href="#" class="scrollup" id="scroll-up">
            <i class="ri-arrow-up-line scrollup__icon"></i>
        </a>

        <!--=============== SCROLL REVEAL===============-->
        <script src="assets/js/scrollreveal.min.js"></script>
        
        <!--=============== SWIPER JS ===============-->
        <script src="assets/js/swiper-bundle.min.js"></script>

        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
    </body>
</html>